<template>        
    <div class="person-card">

        <div class="info">
            <el-image style="width: 30px; height: 30px" :src="personInfo.imgSrc"/>
            <div class="info-detail">
                <div class="name">    
                    <span>
                        {{ personInfo.shortName }}
                    </span>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
const props = defineProps({
    personInfo:{}
})
</script>

<style scoped lang="scss">

.person-card {
    background-color: #F9F9F9;
    color: black;
    margin-top: 10px;
    border-radius: 10px;
    height: 50px;
    // 绝对定位,左上角为0,0,从这个位置定位
    position:relative;
    // 光标移入后,指针变为手型
    cursor: pointer;
    width: 100%;
    .info {
        height: 100%;
        position:absolute;
        width: 90%;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
        overflow: hidden;
        display: flex;
        ::v-deep .el-image {
            margin-top: 10px;
            margin-right: 15px;
            border-radius: 50%;
        }
        .info-detail {
            width: 80%;
            position: relative;
            .name {
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                
                span {
                    font-family: "Alibaba_PuHuiTi_2.0_65_Medium_65_Medium";
                    letter-spacing: 0.3px;
                    font-size: 14px;
                }
            }
            .detail {
                overflow: hidden;
                font-size: 12px;
                white-space: normal;
            }
        }
    }
    &:hover {
        background-color: #ecf5ff;
    }
}
</style>